<template>
  <el-dialog v-model="dialogVisible" width="600px">
    <Title title="队伍志愿" />
    <div class="dialog-container" v-if="teamData">
      <!-- 队伍基本信息 -->
      <el-alert :title="`队伍：${teamData.teamName || '未命名'}`" type="info" :closable="false" class="mb-16" />

      <!-- 志愿列表 -->
      <div v-if="volunteerList.length > 0" class="volunteer-list">
        <el-timeline>
          <el-timeline-item
            v-for="(volunteer, index) in volunteerList"
            :key="volunteer.volunteerId"
            :timestamp="teamCode(volunteer.sort)"
            placement="top"
            :type="getVolunteerType(index)"
            :hollow="index > 0"
          >
            <el-card shadow="hover">
              <div class="volunteer-item">
                <div class="volunteer-content">
                  <el-descriptions :column="1" size="default">
                    <el-descriptions-item label="教师姓名">
                      <span class="teacher-name">
                        {{ volunteer.teacher?.user?.nickName || '-' }}
                      </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="工号" v-if="volunteer.teacher?.teachId">
                      {{ volunteer.teacher?.teachId }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 未填报志愿提示 -->
      <el-empty v-else description="该队伍暂未填报志愿" :image-size="120">
        <template #image>
          <el-icon :size="80" color="#cccccc">
            <Document />
          </el-icon>
        </template>
      </el-empty>

      <!-- 志愿填报说明 -->
      <el-alert v-if="volunteerList.length > 0" title="说明" type="info" :closable="false" class="mt-16">
        <template #default>
          <div class="volunteer-tip">
            <p>• 第一志愿优先级最高</p>
            <p>• 手动分配可不受志愿限制</p>
          </div>
        </template>
      </el-alert>
    </div>

    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Document } from '@element-plus/icons-vue'
import Title from '@/components/Title/index.vue'
const dialogVisible = ref(false)
const teamData = ref(null)

// 志愿列表（按sort排序）
const volunteerList = computed(() => {
  if (!teamData.value?.teamTeachers) return []
  return [...teamData.value.teamTeachers].sort((a, b) => a.sort - b.sort)
})

// 根据志愿顺序获取类型
const getVolunteerType = (index) => {
  if (index === 0) return 'success'
  if (index === 1) return 'primary'
  if (index === 2) return 'warning'
  return 'info'
}

// 打开对话框
const openDialog = (team) => {
  teamData.value = team
  dialogVisible.value = true
}

defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.volunteer-container {
  .mb-16 {
    margin-bottom: 16px;
  }

  .mt-16 {
    margin-top: 16px;
  }

  .volunteer-list {
    .volunteer-item {
      .volunteer-content {
        .teacher-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
    }
  }

  .volunteer-tip {
    p {
      margin: 4px 0;
      font-size: 13px;
      line-height: 1.6;
    }
  }
}

:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
  font-weight: 600;
}
</style>
